<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue';
import { Alert } from 'ant-design-vue';
import { Colon, HttpMethodText } from '@xcan-angus/vue-ui';
import { utils } from '@xcan-angus/infra';
import { useI18n } from 'vue-i18n';

import StatusTag from '@/views/report/preview/execFunction/sampling/http/collapse/statusTag/index.vue';
import { HTTPInfo } from './PropsType';
import { ExecContent } from '../../PropsType';
import { formatTime } from '../../../utils';

const { t } = useI18n();

export interface Props {
  value: HTTPInfo;
  content: ExecContent[];
  ignoreAssertions: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  value: undefined,
  content: undefined,
  ignoreAssertions: undefined
});

const AssertionsResult = defineAsyncComponent(() => import('@/views/report/preview/execFunction/sampling/http/collapse/http/assertionResult/index.vue'));

const caseId = computed(() => {
  return props.value?.caseId;
});

const apisId = computed(() => {
  return props.value?.apisId;
});

const httpContent = computed(() => {
  const linkName = props.value?.linkName;
  if (!linkName) {
    return undefined;
  }

  return props.content?.find(item => linkName === item.name);
});

const method = computed(() => {
  return httpContent.value?.content?.request0?.method;
});

const url = computed(() => {
  return httpContent.value?.content?.request0?.url;
});

const httpStatus = computed(() => {
  return httpContent.value?.content?.response?.status || '--';
});

const bodySize = computed(() => {
  const size = httpContent.value?.content?.response?.bodySize;
  if (size === undefined || size === null) {
    return '--';
  }

  return utils.formatBytes(+size);
});

const runtime = computed(() => {
  const timeStamp = httpContent.value?.content?.response?.timeline?.total;
  if (timeStamp === undefined || timeStamp === null) {
    return '--';
  }

  return formatTime(+timeStamp);
});

const status = computed(() => {
  if (!httpContent.value) {
    return 'block';
  }

  return httpContent.value.content?.success ? 'success' : 'fail';
});

const failMessage = computed(() => {
  return httpContent.value?.content?.failMessage;
});

const showBasicInfo = computed(() => {
  return !!httpContent.value;
});
</script>
<template>
  <div class="border border-solid rounded border-theme-text-box">
    <div class="flex items-start px-2.5 pt-2 pb-1">
      <template v-if="caseId">
        <span class="flex-shrink-0 mr-3">
          <svg
            t="1725160898227"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="14709"
            width="16"
            height="16"><path d="M196.57142844 718.48228531V854.85714312a27.42857156 27.42857156 0 0 0 27.42857156 27.42857157h576a27.42857156 27.42857156 0 0 0 27.42857156-27.42857156v-134.81142844h82.28571375V854.85714312a109.71428531 109.71428531 0 0 1-109.71428531 109.71428532H224a109.71428531 109.71428531 0 0 1-109.71428531-109.71428531v-136.37485782h82.28571375z m12.768-293.22514218c24.39771469 0 43.28228531 3.97714313 56.68114312 11.93142843 13.38514312 7.95428531 20.07771469 18.15771469 20.07771375 30.624 0 6.89828531-1.728 12.864-5.17028531 17.89714313a42.55542844 42.55542844 0 0 1-11.93142844 11.93142843 129.13371469 129.13371469 0 0 0-22.08-11.53371468c-7.81714313-3.18171469-16.896-4.77257156-27.23657156-4.77257157-20.42057156 0-36.06857156 6.22628531-46.93028531 18.69257157-10.87542844 12.46628531-16.30628531 30.08914313-16.30628625 52.896 0 23.06742844 6.03428531 40.82742844 18.10285687 53.29371468 12.06857156 12.46628531 28.29257156 18.69257156 48.71314313 18.69257157 10.87542844 0 20.09142844-1.45371469 27.63428625-4.37485782a189.86057156 189.86057156 0 0 0 21.68228531-9.94285687c4.512 3.70285688 8.02285688 8.14628531 10.53257156 13.31657156 2.52342844 5.184 3.78514313 11.20457156 3.78514313 18.10285688 0 10.87542844-6.03428531 20.09142844-18.10285781 27.648-12.06857156 7.54285688-30.41828531 11.328-55.07657157 11.328-17.76 0-34.464-2.52342844-50.112-7.55657157a111.81257156 111.81257156 0 0 1-40.96457062-23.27314218c-11.65714313-10.464-20.87314313-23.72571469-27.648-39.77142938-6.74742844-16.04571469-10.13485687-35.19085688-10.13485781-57.46285687 0-20.68114312 3.25028531-38.90742844 9.73714312-54.69257156 6.50057156-15.77142844 15.38742844-29.088 26.66057156-39.96342844a112.128 112.128 0 0 1 39.56571375-24.65828531 139.24114313 139.24114313 0 0 1 48.52114313-8.352z m421.57714312 0.79542843c11.39657156 0 22.01142844 0.79542844 31.81714313 2.38628531 9.80571469 1.59085688 18.24 4.04571469 25.26171375 7.36457157 7.02171469 3.30514312 12.52114313 7.54285688 16.49828625 12.72685687 3.97714313 5.17028531 5.96571469 11.19085687 5.96571375 18.08914313s-1.59085688 12.79542844-4.77257157 17.69142843a49.60457156 49.60457156 0 0 1-11.53371375 12.53485782c-5.82857156-3.70285688-13.65942844-6.96685688-23.46514312-9.73714313a117.696 117.696 0 0 0-32.21485688-4.18285687c-11.93142844 0-20.68114312 1.64571469-26.24914312 4.96457062-5.568 3.31885687-8.352 7.50171469-8.352 12.53485781 0 3.97714313 1.728 7.22742844 5.17028531 9.73714219 3.44228531 2.52342844 8.61257156 4.84114312 15.51085781 6.96685781l21.07885688 6.76114219c24.91885687 7.95428531 44.07771469 18.10285688 57.46285687 30.432 13.39885687 12.31542844 20.09142844 29.088 20.09142844 50.304 0 22.53257156-8.88685688 40.77257156-26.64685687 54.69257157-17.76 13.92-43.88571469 20.87314313-78.34971375 20.87314312a182.4 182.4 0 0 1-34.01142938-2.98971469c-10.464-1.98857156-19.61142844-4.896-27.42857062-8.74971375-7.81714313-3.84-13.92-8.61257156-18.29485782-14.31771468a31.44685688 31.44685688 0 0 1-6.56914218-19.68c0-7.68 2.24914313-14.26285687 6.76114219-19.69371375 4.512-5.43085687 9.408-9.6 14.71542843-12.52114313 7.41942844 5.82857156 16.49828531 10.87542844 27.23657157 15.11314313 10.73828531 4.25142844 22.47771469 6.36342844 35.20457156 6.36342843 12.98742844 0 22.13485687-1.98857156 27.44228625-5.96571468 5.30742844-3.97714313 7.95428531-8.61257156 7.95428531-13.92 0-5.30742844-2.12571469-9.33942844-6.36342844-12.12342844-4.25142844-2.784-10.20342844-5.51314313-17.89714312-8.16l-16.704-5.568c-11.65714313-3.97714313-22.272-8.02285688-31.81714313-12.13714313a97.64571469 97.64571469 0 0 1-24.65828531-14.90742843 61.85142844 61.85142844 0 0 1-16.11428531-20.88685688c-3.84-8.09142844-5.76-17.96571469-5.76-29.62285687 0-22.53257156 8.68114313-40.56685687 26.05714219-54.08914313 17.36228531-13.52228531 41.69142844-20.28342844 72.97371468-20.28342844z m-138.80228625 6.76114313c1.85142844 2.92114312 3.51085687 6.76114313 4.97828625 11.53371375 1.45371469 4.77257156 2.18057156 9.80571469 2.18057157 15.11314312 0 10.08-2.19428531 17.23885688-6.56914313 21.47657156-4.37485687 4.25142844-10.13485687 6.36342844-17.29371469 6.36342844h-83.91771375v36.98742844h89.48571375c1.85142844 2.92114312 3.51085687 6.69257156 4.96457157 11.328 1.46742844 4.64914313 2.19428531 9.61371469 2.19428625 14.92114312 0 10.08-2.12571469 17.23885688-6.36342844 21.47657157-4.25142844 4.25142844-9.94285688 6.36342844-17.10171469 6.36342843h-73.17942844v41.76h102.21257157c1.85142844 2.92114312 3.51085687 6.76114313 4.97828531 11.53371375 1.45371469 4.77257156 2.18057156 9.80571469 2.18057156 15.11314313 0 10.08-2.19428531 17.29371469-6.56914312 21.66857156-4.37485687 4.38857156-10.13485687 6.56914313-17.29371375 6.56914313H360.86857156c-11.39657156 0-20.42057156-3.31885687-27.04457156-9.94285782-6.624-6.624-9.94285688-15.63428531-9.94285688-27.04457156V469.80114313c0-11.39657156 3.31885687-20.42057156 9.94285688-27.04457157 6.624-6.624 15.63428531-9.94285688 27.04457156-9.94285687h131.24571375z m437.088 0c1.85142844 2.92114312 3.51085687 6.76114313 4.96457156 11.53371375 1.46742844 4.77257156 2.19428531 9.80571469 2.19428625 15.11314312 0 10.08-2.19428531 17.23885688-6.55542843 21.47657156-4.38857156 4.25142844-10.14857156 6.36342844-17.30742938 6.36342844h-83.91771375v36.98742844h89.48571375c1.85142844 2.92114312 3.51085687 6.69257156 4.97828625 11.328 1.45371469 4.64914313 2.18057156 9.61371469 2.18057156 14.92114312 0 10.08-2.12571469 17.23885688-6.36342843 21.47657157-4.25142844 4.25142844-9.94285688 6.36342844-17.10171469 6.36342843h-73.17942844v41.76h102.21257156c1.85142844 2.92114312 3.51085687 6.76114313 4.96457157 11.53371375 1.46742844 4.77257156 2.19428531 9.80571469 2.19428531 15.11314313 0 10.08-2.19428531 17.29371469-6.55542844 21.66857156-4.38857156 4.38857156-10.14857156 6.56914313-17.30742844 6.56914313h-116.13257156c-11.39657156 0-20.42057156-3.31885687-27.04457156-9.94285782-6.624-6.624-9.94285688-15.63428531-9.94285688-27.04457156V469.80114313c0-11.39657156 3.31885687-20.42057156 9.94285688-27.04457157 6.624-6.624 15.63428531-9.94285688 27.04457156-9.94285687h131.24571375zM647.79885688 59.42857156c26.22171469 0 51.56571469 9.39428531 71.24571468 26.27657156l152.42057156 128.91428532A109.71428531 109.71428531 0 0 1 909.71428531 297.87885687v91.84457157h-82.28571375v-91.84457156a27.29142844 27.29142844 0 0 0-9.32571468-20.61257157l-152.43428532-128.91428531A27.42857156 27.42857156 0 0 0 647.79885688 141.71428531H224a27.42857156 27.42857156 0 0 0-27.42857156 27.42857157v219.75771468H114.28571469V169.14285688a109.71428531 109.71428531 0 0 1 109.71428531-109.71428532h423.79885687z" p-id="14710"></path></svg>
        </span>
      </template>
      <template v-else>
        <span v-if="apisId" class="flex-shrink-0 mr-3">
          <svg
            t="1725160945406"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="14851"
            width="16"
            height="16"><path d="M923.42857156 772.76342844V854.85714312c0 59.68457156-45.024 109.71428531-102.85714312 109.71428532h-617.14285688C145.59542844 964.57142844 100.57142844 914.54171469 100.57142844 854.85714312v-80.61257156h82.28571469V854.85714312c0 16.04571469 10.23085688 27.42857156 20.57142843 27.42857157h617.14285688c10.34057156 0 20.57142844-11.38285687 20.57142844-27.42857156v-82.09371469h82.28571468zM121.14285688 484.57142844v82.28571469h82.28571468v-82.28571469H265.14285688v246.85714312h-61.71428532v-102.85714312h-82.28571469V731.42857156H59.42857156V484.57142844h61.71428531z m370.28571468 0v61.71428625H429.71428531V731.42857156h-61.71428531V546.28571469H306.28571469V484.57142844h185.14285687zM717.71428531 484.57142844v61.71428625h-61.71428531V731.42857156H594.28571469V546.28571469h-61.71428625V484.57142844H717.71428531z m185.14285782 0c34.97142844 0 61.71428531 26.74285688 61.71428531 61.71428625v41.14285687c0 34.97142844-26.74285688 61.71428531-61.71428531 61.71428531h-82.28571469v82.28571469H758.85714312V484.57142844z m0 61.71428625h-82.28571469v41.14285687h82.28571469v-41.14285687zM820.57142844 59.42857156c57.83314312 0 102.85714313 50.02971469 102.85714312 109.71428531v277.17942844h-82.28571468V354.28571469H182.85714312v90.70628531H100.57142844V169.14285688c0-59.68457156 45.024-109.71428531 102.85714312-109.71428532h617.14285688z m0 82.28571375h-617.14285688c-10.34057156 0-20.57142844 11.38285687-20.57142844 27.42857156v102.85714313h658.28571375V169.14285688c0-16.04571469-10.23085688-27.42857156-20.57142843-27.42857157z" p-id="14852"></path></svg>
        </span>
        <span v-else class="flex-shrink-0 mr-3">
          <svg
            t="1725160983547"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="14993"
            width="16"
            height="16"><path d="M868.57142844 704.79542844a41.14285687 41.14285687 0 0 1 41.07428625 38.72914312l0.06857062 2.41371375V854.85714312a109.71428531 109.71428531 0 0 1-106.28571375 109.65942844L800 964.57142844H224a109.71428531 109.71428531 0 0 1-109.65942844-106.28571375L114.28571469 854.85714312v-97.78285781a41.14285687 41.14285687 0 0 1 82.21714218-2.42742843l0.06857157 2.42742843V854.85714312a27.42857156 27.42857156 0 0 0 25.37142843 27.36000001L224 882.28571469h576a27.42857156 27.42857156 0 0 0 27.36-25.37142938L827.42857156 854.85714312v-108.91885781a41.14285687 41.14285687 0 0 1 41.14285688-41.14285687zM121.14285688 429.71428531v82.28571469h82.28571468v-82.28571469H265.14285688v246.85714313h-61.71428532v-102.85714313h-82.28571469V676.57142844H59.42857156V429.71428531h61.71428531z m370.28571468 0v61.71428625H429.71428531V676.57142844h-61.71428531V491.42857156H306.28571469V429.71428531h185.14285687zM717.71428531 429.71428531v61.71428625h-61.71428531V676.57142844H594.28571469V491.42857156h-61.71428625V429.71428531H717.71428531z m185.14285782 0c34.97142844 0 61.71428531 26.74285688 61.71428531 61.71428625v41.14285688c0 34.97142844-26.74285688 61.71428531-61.71428531 61.71428625h-82.28571469v82.28571375H758.85714312V429.71428531z m0 61.71428625h-82.28571469v41.14285688h82.28571469v-41.14285688zM649.376 59.42857156a109.71428531 109.71428531 0 0 1 66.45942844 22.42285688l3.52457156 2.79771468 150.624 124.75885688a109.71428531 109.71428531 0 0 1 39.648 80.42057156l0.08228531 4.07314313v56.928a41.14285687 41.14285687 0 0 1-82.21714218 2.42742843L827.42857156 350.82971469v-56.928a27.42857156 27.42857156 0 0 0-8.11885687-19.488l-1.81028625-1.64571469L666.87542844 148.02285688a27.42857156 27.42857156 0 0 0-15.11314313-6.19885688L649.376 141.71428531H224a27.42857156 27.42857156 0 0 0-27.36 25.37142938L196.57142844 169.14285688v181.68685781a41.14285687 41.14285687 0 0 1-82.21714313 2.42742843L114.28571469 350.82971469V169.14285688a109.71428531 109.71428531 0 0 1 106.28571375-109.65942844L224 59.42857156h425.376z" p-id="14994"></path></svg>
        </span>
      </template>
      <div class="mr-3.5 flex-1  break-all whitespace-pre-wrap">{{ props.value?.name }}</div>
      <div class="flex-shrink-0 flex-1 justify-end flex items-center">
        <template v-if="showBasicInfo">
          <div class="mr-3.5 flex-shrink-0">
            <span class="mr-0.5">{{ t('protocol.statusCode') }}<Colon /></span>
            <span class="text-theme-sub-content">{{ httpStatus }}</span>
          </div>
          <div class="mr-3.5 flex-shrink-0">
            <span class="mr-0.5">{{ t('common.duration') }}<Colon /></span>
            <span class="text-theme-sub-content"> {{ runtime }}</span>
          </div>
          <div class="mr-3.5 flex-shrink-0">
            <span class="mr-0.5">{{ t('common.size') }}<Colon /></span>
            <span class="text-theme-sub-content"> {{ bodySize }}</span>
          </div>
        </template>
        <template v-if="!props.value?.enabled">
          <StatusTag />
        </template>
        <template v-else>
          <StatusTag :value="status" />
        </template>
      </div>
    </div>
    <div class="flex items-start pl-9.5 pr-2.5 pt-1 pb-2 border-b border-solid border-theme-text-box">
      <HttpMethodText
        class="flex-shrink-0 mr-3.5"
        :value="method"
        style="min-width: 0;" />
      <div class="flex-1 break-all whitespace-pre-wrap">{{ url }}</div>
    </div>
    <Alert
      v-if="!!failMessage"
      :message="failMessage"
      type="error"
      class="mt-3" />
    <AssertionsResult :value="httpContent" :ignoreAssertions="props.ignoreAssertions" />
  </div>
</template>
